import React, { useState ,useEffect} from 'react';
import { View, Text } from '@ray-js/ray';
import { NavBar } from '@ray-js/smart-ui';
import styles from './index.module.less';
// import { showToast } from '@ray-js/ray';
import { Slider } from '@ray-js/smart-ui';
import Mic from '@tuya-miniapp/icons/dist/svg/Mic';
import { Icon } from '@ray-js/smart-ui';

import { putDpData } from '@/utils/sendDp';
import { connectBLEDevice } from '@/utils/ble';
import { dpCodes, globalConfig } from '@/config';
import { getLaunchOptionsSync } from '@ray-js/ray';
import { getDpsInfos, getLaunchOptionsSync } from '@ray-js/ray';

import {
  showToast,
  onDpDataChange,
  offDpDataChange,
  deleteTemporaryPassword,
  createTemporaryPassword,
  updateTempPassword,
} from '@ray-js/ray';

import { ModeOne, ModeTwo, ModeThree } from './Light_Mode/index';

const {  light_switch } = dpCodes;

export function LightPage() {

  //模式切换的变量值
  const [active, setActive] = useState(0);
  const tabs = ['模式一', '模式二', '模式三'];
  const [isSwitchOn, setIsSwitchOn] = useState(false);

  // // 记录灯光模式切换的索引值
  // const [activeLightIndex, setActiveLightIndex] = useState(0);
  // // 存储各模式的 DP 值
  // const [modeDpValues, setModeDpValues] = useState({
  //   mode1: '',
  //   mode2: '',
  //   mode3: ''
  // });



  // 切换标签页时触发的函数
  // const handleTabChange = (index: number) => {
  //   setActive(index);
  // };

  // 记录灯光模式切换的索引值
  const [activeLightIndex, setActiveLightIndex] = useState(0);
  // 存储各模式的 DP 值
  const [modeDpValues, setModeDpValues] = useState({
    mode1: '',
    mode2: '',
    mode3: ''
  });

  // 切换灯光模式时触发的索引函数
  const handleLightTabClick = (index: number) => {
    setActiveLightIndex(index);
  };

  //灯光开关putdpdata
  const handleSwitchToggle = () => {
    setIsSwitchOn(!isSwitchOn);
    console.log(`Switch is now ${isSwitchOn? 'off' : 'on'}`);
    putDpData( light_switch , !isSwitchOn); // 发送开关状态到设备
  };

  // 切换标签页时触发的函数
  const handleTabChange = (index: number) => {
    setActive(index);
    // 若有对应模式的 DP 值，自动切换到彩光并同步数据
    if (index === 0 && modeDpValues.mode1) {
      setActiveLightIndex(1);
    } else if (index === 1 && modeDpValues.mode2) {
      setActiveLightIndex(1);
    } else if (index === 2 && modeDpValues.mode3) {
      setActiveLightIndex(1);
    }
  };

  // 灯光开关
    // 定义 DP 数据变化处理函数
  // const handleDpDataChange = ({ dpCode, dpValue }) => {
  //   // 根据变化的 DP 点进行不同的处理
  //   console.log(`DP Code: ${dpCode}, DP Value: ${dpValue}`);

  //   if (dpCode === '107') {       // 喷雾开关
  //     console.log(`107bjhDP Code: ${dpCode}, DP Value: ${dpValue}`);
  //     setIsSwitchOn(dpValue);
  //   } 

  //   if (dpCode === '109') {       // 模式1灯光设置
  //     console.log(`109bjhDP Code: ${dpCode}, DP Value: ${dpValue}`);

  //   }

  //   if (dpCode === '110') {       // 模式二灯光设置
  //     console.log(`110bjhDP Code: ${dpCode}, DP Value: ${dpValue}`);
  //   }

  //   if (dpCode === '111') {       // 模式三灯光设置
  //     console.log(`111bjhDP Code: ${dpCode}, DP Value: ${dpValue}`);

  //   }
  // };
   // 灯光开关
  // 定义 DP 数据变化处理函数
  const handleDpDataChange = ({ dpCode, dpValue }) => {
    // 根据变化的 DP 点进行不同的处理
    console.log(`DP Code: ${dpCode}, DP Value: ${dpValue}`);

    if (dpCode === '107') {       // 喷雾开关
      console.log(`107bjhDP Code: ${dpCode}, DP Value: ${dpValue}`);
      setIsSwitchOn(dpValue);
    } 

    // if (dpCode === '109') {       // 模式1灯光设置
    //   console.log(`109bjhDP Code: ${dpCode}, DP Value: ${dpValue}`);
    //   setModeDpValues(prev => ({ ...prev, mode1: dpValue }));
    // }

    // if (dpCode === '110') {       // 模式二灯光设置
    //   console.log(`110bjhDP Code: ${dpCode}, DP Value: ${dpValue}`);
    //   setModeDpValues(prev => ({ ...prev, mode2: dpValue }));
    // }

    // if (dpCode === '111') {       // 模式三灯光设置
    //   console.log(`111bjhDP Code: ${dpCode}, DP Value: ${dpValue}`);
    //   setModeDpValues(prev => ({ ...prev, mode3: dpValue }));
    // }
  };

    // 定义 DP 数据变化处理函数
    const handleDpDataChange_effct = ({ dpCode, dpValue }) => {
      // 根据变化的 DP 点进行不同的处理
      console.log(`DP Code: ${dpCode}, DP Value: ${dpValue}`);
  
      if (dpCode === '107') {       // 喷雾开关
        console.log(`107bjhDP Code: ${dpCode}, DP Value: ${dpValue}`);
        setIsSwitchOn(dpValue);
      } 
  
      if (dpCode === '109') {       // 模式1灯光设置
        console.log(`109bjhDP Code: ${dpCode}, DP Value: ${dpValue}`);
        setModeDpValues(prev => ({ ...prev, mode1: dpValue }));
      }
  
      if (dpCode === '110') {       // 模式二灯光设置
        console.log(`110bjhDP Code: ${dpCode}, DP Value: ${dpValue}`);
        setModeDpValues(prev => ({ ...prev, mode2: dpValue }));
      }
  
      if (dpCode === '111') {       // 模式三灯光设置
        console.log(`111bjhDP Code: ${dpCode}, DP Value: ${dpValue}`);
        setModeDpValues(prev => ({ ...prev, mode3: dpValue }));
      }
    };
  
  // useEffect(() => {
  //   const dpDataChangeHandler = ({ dps }) => {
  //     // 遍历每个变化的 DP 点
  //     Object.entries(dps).forEach(([dpCode, dpValue]) => {
  //       handleDpDataChange({ dpCode, dpValue });
  //     });
  // };
  
  //   onDpDataChange(dpDataChangeHandler);
  //   // 清理函数，组件卸载时执行
  //   return () => {
  //     offDpDataChange(dpDataChangeHandler);
  //   };
  // }, []);

  // 注册监听器
  // useEffect(() => {
  //   const dpDataChangeHandler = ({ dps }) => {
  //     // 遍历每个变化的 DP 点
  //     Object.entries(dps).forEach(([dpCode, dpValue]) => {
  //       handleDpDataChange({ dpCode, dpValue });
  //     });
  //   };

  //   onDpDataChange(dpDataChangeHandler);

  //   // 清理函数，组件卸载时执行
  //   return () => {
  //     offDpDataChange(dpDataChangeHandler);
  //   };
  // }, []);



  // useEffect(() => {
  // // 获取启动选项中的设备 ID
  // const { deviceId } = getLaunchOptionsSync().query || {};
  // // 使用设备 ID 执行相关操作
  // // console.log('当前设备 ID:', deviceId);

  // if (deviceId) {
  //   console.log('当前设备 ID:', deviceId);

  //   // 使用设备 ID 获取设备的所有 DP 信息
  //   getAllDpInfos(deviceId);
  // } else {
  //   console.error('无法获取设备 ID');
  // }
  // }, []);

  // const getAllDpInfos = (deviceId) => {
  //   getDpsInfos({
  //     devId: deviceId,
  //     gwId: deviceId, // 对于直连设备，gwId 同 devId
  //   })
  //     .then((res) => {
  //       console.log('获取到的所有 DP 信息:', res);
        
        
  //     })
  //     .catch((error) => {
  //       console.error('获取 DP 信息失败:', error);
  //     });
  // };

  // useEffect(() => {
  //   const { deviceId } = getLaunchOptionsSync().query || {};
  //   if (deviceId) {
  //     // 获取设备所有 DP 信息
  //     getDpsInfos({
  //       devId: deviceId,
  //       gwId: deviceId
  //     })
  //     .then((res) => {
  //       console.log('获取到的所有 DP 信息:', res);
  //       res.forEach((item) => {
  //         const { dpId, value } = item;
  //         // 处理布尔类型的字符串值，转换为布尔值
  //         let processedValue = value;
  //         if (typeof value === 'string' && (value === 'true' || value === 'false')) {
  //           processedValue = value === 'true';
  //         }
  //         // 将 dpId 转换为字符串
  //         const dpCodeStr = String(dpId);
  //         // console.log(`DP Code: ${code}, DP Value: ${processedValue}`);
  //         handleDpDataChange_effct({ dpCode: dpCodeStr, dpValue: processedValue });
  //       });
  //     })
  //     .catch((error) => {
  //       console.error('获取 DP 信息失败:', error);
  //     });
  //   } else {
  //     console.error('无法获取设备 ID');
  //   }
  // }, []);


 


  return (
    <>
      <NavBar
        title="云图香氛机"
        leftArrow
        className={styles.title_css_index}
        border={false}
      />

      <View className={styles.content}>
        <View className={styles.light}>
          <View className={styles.sound_info}>
            <Icon name={Mic} size="30px" />
            <View className={styles.verticalLayout}>
              <Text className={styles.sound_text}>灯光开关</Text>
              <Text className={styles.sound_sub_text}>{isSwitchOn ? '开' : '关'}</Text>
            </View>
          </View>
          <View
            className={`${styles.switch} ${isSwitchOn ? styles.switchOn : ''}`}
            onClick={handleSwitchToggle}
          >
            {/* 左侧竖线，滑块离开时放大，靠近时缩小 */}
            <View className={`${styles.switchLine} ${isSwitchOn ? styles.lineGrow : styles.lineShrink}`} />
            {/* 滑块 */}
            <View className={`${styles.switchSlider} ${isSwitchOn ? styles.sliderOn : ''}`} />
            {/* 右侧竖线，滑块离开时放大，靠近时缩小 */}
            <View className={`${styles.switchLine} ${isSwitchOn ? styles.lineShrink : styles.lineGrow}`} />
          </View>
        </View>

        <View className={styles.tabBar}>
          {tabs.map((tab, index) => (
            <button
              key={index}
              className={`${styles.tabItem} ${index === active ? styles.activeTab : ''}`}
              onClick={() => handleTabChange(index)}
            >
              {tab}
            </button>
          ))}
          {/* 滑动色块 */}
          <View className={styles.slider} style={{ transform: `translateX(${active * 100}%)` }} />
        </View>

        {/* 模式一 标签页对应容器 */}
        {active === 0 && (
          <ModeOne 
            activeLightIndex={activeLightIndex} 
            handleLightTabClick={handleLightTabClick} 
            // dpValue={modeDpValues.mode1}
            dpValue={modeDpValues.mode1}
          />
        )}
        {/* 模式二 标签页对应容器 */}
        {active === 1 && (
          <ModeTwo 
            activeLightIndex={activeLightIndex} 
            handleLightTabClick={handleLightTabClick} 
            dpValue={modeDpValues.mode2}
          />
        )}
        {/* 模式三 标签页对应容器 */}
        {active === 2 && (
          <ModeThree 
            activeLightIndex={activeLightIndex} 
            handleLightTabClick={handleLightTabClick} 
            dpValue={modeDpValues.mode3}
          />
        )}
      </View>

    </>
  );
}